<template>
  <div class="details" v-if="hotelData">
    <div class="crumbs">酒店 ></div>
    <div class="tille">
      <div class="title_text">{{hotelData.name}} 
          <span v-if="hotelData"><i class="iconfont iconhuangguan" v-for="(tiem,index) in hotelData.hotellevel.level" :key="index"></i></span> 
      </div>
      <div class="title_pingyin">{{hotelData.alias}}</div>
      <div class="site"> <i class="iconfont iconlocation"></i> {{hotelData.address}}</div>
    </div>
    <div class="hotel_figure">
      <img class="big_img" ref="img_big" src="" alt />
      <div class="hotel_figure_thumbnail">
        <img @click="SwitchThePicture('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1615829886,2342444232&fm=26&gp=0.jpg')" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1615829886,2342444232&fm=26&gp=0.jpg" alt />
        <img @click="SwitchThePicture('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1451553862,1476681377&fm=26&gp=0.jpg')" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1451553862,1476681377&fm=26&gp=0.jpg" alt />
        <img @click="SwitchThePicture('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1962799577,1954864471&fm=26&gp=0.jpg')" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1962799577,1954864471&fm=26&gp=0.jpg" alt />
        <img @click="SwitchThePicture('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2440120802,3847127056&fm=26&gp=0.jpg')" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2440120802,3847127056&fm=26&gp=0.jpg" alt />
        <img @click="SwitchThePicture('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1502781117,557811879&fm=26&gp=0.jpg')" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1502781117,557811879&fm=26&gp=0.jpg" alt />
        <img @click="SwitchThePicture('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1427724383,4268696085&fm=26&gp=0.jpg')" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1427724383,4268696085&fm=26&gp=0.jpg" alt />
      </div>
    </div>

    <div class="price">
        <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column
            prop="name"
            label="价格来源"
            width="400">
            </el-table-column>
            <el-table-column
            prop="bestType"
            label="最低房型"
            width="440">
            </el-table-column>
            <el-table-column prop="price" label="最低价格/每晚">
                <template slot-scope="scope">
                    <div class="addo" style="color: #ff994a;cursor: pointer;">$ {{scope.row.price}} <span style="color: #1e1e1e;">起</span> > </div>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 地图 -->
    <Hoteldetailsmap />
    <!-- 地图 -->

    <div class="basic_information">
        <div class="basic">
            <div class="data_one">基本信息</div>
            <div class="data_two">
                <span>入住时间14:00</span>
                <span>离店时间</span>
                <span>2014年开业</span>
                <span>酒店规模: 34间w客房</span>
            </div>
        </div>
        <div class="basic">
            <div class="data_one">主要设施</div>
            <div class="data_three">
                <span>外币服务</span>
                <span>吹风机</span>
                <span>WiFi</span>
                <span>洗衣服务</span>
            </div>
        </div>
        <div class="basic">
            <div class="data_one">停车信息</div>
        </div>
        <div class="basic">
            <div class="data_one">品牌信息</div>
        </div>
    </div>

    <!-- 用户评分 -->
    <UserRatings />
    <!-- 用户评分 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
        hotelData: '',
        tableData:[],
        form: {
        id: 185, //Number	酒店id(酒店详情)
        city: 197, //Number	城市id
        price_in: 600, //Number	酒店价格
        scenic: 3, //Number	景点id
        name_contains: "锦江之星", //String	名字模糊查询
        hotellevel: 3, //Number	酒店星级
        hoteltype: '', //Number	酒店类型
        hotelbrand: '', //Number	酒店品牌
        hotelasset: '', //Number	酒店设施
        enterTime: 3, //Date	入店时间
        person: 1, //Number	人数
        _sort: "1", //String	排序
        _limit: 1, //Number	条数
        _start: 1, //Number	开始数据（分页）
      },
    };
  },
  created() {
    this.$axios({
        url: '/hotels?id=' + 1 , 
    }).then(res=>{
        //console.log(res);
        this.hotelData = res.data.data[0]
        console.log(this.hotelData);
        this.tableData = res.data.data[0].products
    })

    // 根据酒店id获取酒店选项
    this.$axios.get('/hotels/options')
    .then(res=>{
        console.log(res);
    })
  },

  methods: {
      SwitchThePicture(src) {  //切换图片
        console.log(src);
        this.$refs.img_big.src = src
      }
  }
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
.details {
  img {
    vertical-align: bottom;
  }
  width: 1000px;
  margin: 0 auto;
  .crumbs {
    font-size: 14px;
    font-weight: 700;
    padding: 20px 0;
  }
  .tille {
    padding-bottom: 20px;
    .title_text {
      font-size: 32px;
      i{
          color: #ff9900;
      }
    }
    .title_pingyin,
    .site {
      font-size: 14px;
      color: #7c6b79;
    }
  }
  // 图片
  .hotel_figure {  
      display: flex;
      justify-content: space-between;
    .big_img {
        width: 640px;
        margin-right: 10px;
        height: 380px;
    }
    .hotel_figure_thumbnail {
        width: 340px;
        height: 380px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        line-height: 0;
        overflow: hidden;
        img {
            width: 48%;
            height: 31%;
            vertical-align: middle;
            &:nth-child(2n+0){
                margin-left: 1%;
            }
            &:nth-child(odd) {
                margin-right: 1%;
            }
            &:nth-child(-n+4) {
                margin-bottom: 3%;
            }
        }
    }
  }
  //价格来源
  .price {
      padding: 30px 0;
      .addo {
          cursor: pointer;
      }
  }

  //基本信息
  .basic_information {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
    .basic {
        line-height: 50px;
        height: 50px;
        border-bottom: 1px solid #e2e1e1;
        display: flex;
        .data_one {
            width: 180px;
        }
        .data_two {
            display: flex;
            justify-content: space-between;
            width: 700px;
        }  
        .data_three {
            span {
                padding: 3px 10px;
                background: #f4f0f0;
                border-radius: 3px;
                font-size: 12px;
            }
        } 
    }
  }
  // 基本信息结束 

  
}
</style>